<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动端的时代要如何重塑网页设计流程？_（自适应手机版）简洁大气响应式网络建站工作室公司织梦模板 - 南京创劲 - </title>
<meta name="keywords" content="移动,端,的,时代,要,如何,重塑,网页设计,流程," />
<meta name="description" content="随着时代和技术的发展，网页设计的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计的唯一标准，静态页面设计在整个设计流程中所占的比重也逐步降低" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="format-detection" content="telephone=no">
<link href="/style/css/menu.css" rel="stylesheet" >
<link href="/style/css/channel.css" rel="stylesheet" >
<link href="/style/css/base-page.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/style/css/load6.css" rel="stylesheet" type="text/css" />
<link href="/style/css/ext.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/style/js/jquery-1.8.2.min.js"></script>
<script type='text/javascript' src="/style/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="/style/js/respond.js"></script>
<script type="text/javascript" src="/style/js/jquery.royalslider.min.js?v=9.3.6"></script>
<script type="text/javascript" src='/style/js/nprogress.js'></script>
<script type="text/javascript" src='/style/js/qrcode.js'></script>
</head>
<body>
<div class="fade out"> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/" alt="nice design"><img src="/style/images/logo.png" style="width:65px;height:50px;margin-top:-10px"alt="zhizhuxiu"/></a> </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li ><a href="/">首页</a></li>
          
          <li><a href='/html/about/' rel='dropmenu1'>关于</a></li>
          
          <li><a href='/html/news/' rel='dropmenu1'>动态</a></li>
          
          <li><a href='/html/case/' rel='dropmenu1'>案例</a></li>
          
          <li><a href='/html/service/' rel='dropmenu1'>服务</a></li>
          <li class='active'><a href='/html/zhishi/'>知识</a></li>
        </ul>
      </div>
    </div>
  </div>
  <script src="/style/js/bootstrap.js"></script> 
  <script src="/style/js/jquery.bootstrap-autohidingnavbar.js"></script> 
  <script type="text/javascript">
$("div.navbar-fixed-top").autoHidingNavbar();
</script>
  <div class="news_con_banner" style="background:url(/style/images/article-news.jpg) no-repeat center top;background-size:cover;">
    <h1>移动端的时代要如何重塑网页设计流程？</h1>
  </div>
  <!--mews_banner-->
  <div class="news_con_top">
    <div class="con">
      <ul>
        <li><strong>视觉设计 2016-04-29 </strong><span>分享新闻到： <a href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=2924220432'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));"><i class="iconfont icon-sina">&#xe64d </i></a><a href="javascript:void(0)"class="weixin1"><i class="iconfont icon-wechat">&#xe7f0 </i></a></span></li>
      </ul>
      <a href="/html/zhishi/shijue/" class="more">&lt;返回列表</a></div>
    <!--con--></div>
  <!--news_con_top-->
  <div class="news_con"><br />
    <p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei'; text-align: center;">
	<img alt="" src="/uploads/allimg/160429/1-160429145341322.jpg" style="width: 960px; height: 440px;" /><br />
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	随着时代和技术的发展，网页设计的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表不再是网页设计的唯一标准，静态页面设计在整个设计流程中所占的比重也逐步降低，正如同Stephen Hay所说，我们所设计的不再是单纯的页面，而是包含诸多组件的一整个系统。</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<br />
	瞬息万变的不仅仅是内容和信息，用户所用的设备和内容呈现的模式也在快速改变着，这些都与网页设计息息相关，也没有任何迹象表明这种改变会变缓。而我们的设计作为载体和呈现的载体，理应走在它们的前面。</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<br />
	之前的网页设计流程在今天看来已经无法应付这一切了，修整刻不容缓。敏捷开发、团队协作和适应性调整都已经是设计过程的最前沿，设计和开发之间的界限越来越模糊了。</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<br />
	<strong><span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 16px;">移动端优先</span></strong></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei'; text-align: center;">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">移动端优先，这句口号已经喊了好几年了，真正有远见卓识的网页设计师应该很清楚这句话远不止于口号那么简单。移动端优先必然会牵涉到设计流程，我们应当从小屏幕着手，先设计简单的布局，然后为其增加复杂度，以其为基础，为更大的屏幕来进行设计。</span></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">随着移动端设备的用量超越PC，移动端的网页浏览无疑已经成为用户获取信息的主要渠道，移动端优先的设计自然应该成为常态。</span></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">除非你的网站情况非常特殊，或者你拥有极具说服力和特殊的数据支撑你的想法，移动端优先的设计符合逻辑也有道理。</span></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">相比于为小屏幕去降低整个设计的复杂性，为移动端先做好适配再提升其复杂度，是更容易的。回想一下按照之前的流程来设计网页吧，我们总是疲于应对客户的要求，在后期还要来回调整设计和代码。未完成的页面和不够易用的移动端页面，填不完的坑。</span></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">桌面端的页面总是先做完，而在此基础上修改出来的移动端页面，似乎总有点粗制滥造的感觉。</span></p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	&nbsp;</p>
<p style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-size: 14px; line-height: 28px; width: 800px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei';">
	<span style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; line-height: 1.5;">那么我们就不要将&rdquo;移动端优先&rdquo;当作一句简单的口号好了！从现在开始真正意义上为移动端的小屏幕开始做设计！</span></p>

   
    <div class="show">分享新闻到： <a href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=2924220432'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));"><i class="iconfont icon-sina">&#xe64d </i></a><a href="javascript:void(0)" class="weixin1"><i class="iconfont icon-wechat">&#xe7f0 </i></a></div>
  </div>
  <!--news_con-->
  <div class="news_box or">
    <h1>更多阅读</h1>
    <div class="news_box_list or">
      <dl >
        <dd style="background:url(/uploads/allimg/160429/1-1604292019150-L.jpg) no-repeat center center; background-size:cover;"><a href="/html/news/hangye/18.html"></a></dd>
        <dt>
          <h2><a href="/html/news/hangye/18.html">IXDC国际体验设计协会优秀设计</a></h2>
        </dt>
        <dt>行业动态   2016-04-29</dt>
        <dt>2013年6月23日下午，主题为体验创新价值的2013中国交互设计体验周在杭州浙江省......<a href="/html/news/hangye/18.html" class="bt">查看全文</a></dt>
      </dl>
<dl >
        <dd style="background:url(/uploads/allimg/160429/1-1604291506470-L.jpg) no-repeat center center; background-size:cover;"><a href="/html/news/hangye/9.html"></a></dd>
        <dt>
          <h2><a href="/html/news/hangye/9.html">琥珀四重奏官网上线</a></h2>
        </dt>
        <dt>行业动态   2016-04-29</dt>
        <dt>琥珀四重奏成立于2005年，第一小提琴：宁方亮、第二小提琴：苏雅 菁、中提琴......<a href="/html/news/hangye/9.html" class="bt">查看全文</a></dt>
      </dl>
<dl >
        <dd style="background:url(/uploads/allimg/160429/1-1604291504070-L.jpg) no-repeat center center; background-size:cover;"><a href="/html/news/gongsi/8.html"></a></dd>
        <dt>
          <h2><a href="/html/news/gongsi/8.html">奈思设计开通站酷主页</a></h2>
        </dt>
        <dt>公司新闻   2016-04-29</dt>
        <dt>开通了站酷主页 站酷（ZCOOL），中国最具人气的设计师互动平台，2006年8月创立......<a href="/html/news/gongsi/8.html" class="bt">查看全文</a></dt>
      </dl>

    </div>
    <!--news_box_list--><a href="/html/zhishi/shijue/" class="allnews">返回全部新闻</a></div>
  <div class="theme-mask"></div>
  <div class="popover">
    <dl>
      <dd>
        <div id="qrcode"></div>
      </dd>
      <dt>扫描二维码分享到微信</dt>
      <dt><a href="javascript:void(0)" class="close">确 认</a></dt>
    </dl>
  </div>
</div>
<!--eject--><script>
    window.onload =function(){
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 200,//设置宽高
            height : 200
        });
        qrcode.makeCode('http://127.0.0.1//html/zhishi/shijue/6.html');
    }
</script><script type="text/javascript">
$(document).ready(function($){
$('.weixin1').click(function(){
$('.theme-mask').show();
$('.theme-mask').height($(document).height());
$('.popover').slideDown(200);
})
$('.close').click(function(){
$('.theme-mask').hide();
$('.popover').slideUp(200);
})
 
})
$(document).ready(function(e) {
    $('.news_box_list dl').last().addClass('last')
});
</script><!--news_box--> 

<div class="main_foot">
    <div class="foot">
      <div class="foot_logo"> <img src="/style/images/foot_logo.png" width="150"/>
        <p style="font-size:16px; margin:5px 0 0 5px; color:#333;">专注用户体验设计与开发</p>
      </div>
      <div class="con">
        <ul class="list1">
          <li>
           <h1>服务</h1>
          </li>
          <li><a href="/html/service/#templatemo1">服务体系</a></li>
          <li><a href="/html/service/#templatemo2">解决方案</a></li>
          <li><a href="/html/service/#templatemo3">服务优势</a></li>
          <li><a href="/html/service/#templatemo4">合作流程</a></li>
          <li><a href="/html/service/#templatemo5">服务客户</a></li>
        </ul>
        </ul>
        <ul class="list1">
          <li>
            <h1>案例</h1>
          </li>
          
          <li><a href='/html/case/web/'>网页设计</a></li>
          
          <li><a href='/html/case/soft/'>软件界面</a></li>
          
          <li><a href='/html/case/add/'>平面广告</a></li>
          
          <li><a href='/html/case/app/'>移动APP</a></li>
          
        </ul>
        <ul class="list1">
          <li>
            <h1>动态</h1>
          </li>
          
          <li><a href='/html/news/gongsi/'>公司新闻</a></li>
          
          <li><a href='/html/news/hangye/'>行业动态</a></li>
          
        </ul>
        <ul class="list1">
          <li>
            <h1>知识</h1>
          </li>
          
          <li><a href='/html/zhishi/tiyan/'>用户体验</a></li>
          
          <li><a href='/html/zhishi/shijue/'>视觉设计</a></li>
          
          <li><a href='/html/zhishi/chaungyi/'>创意设计</a></li>
          
        </ul>
      </div>
      <ul class="list2">
        <li>
          <h1>商务合作</h1>
        </li>
        <li>邮箱：354006421@qq.com</li>
        <li>手机：13588889999</li>
        <li>座机：4008-888-888</li>
        <li>Q Q：354006421 <a href="http://wpa.qq.com/msgrd?v=3&uin=354006421&site=qq&menu=yes" target="_blank"><i class="qq"></i>点击交谈</a></li>
        <li>地址：江苏省南京市玄武区玄武湖</li>
      </ul>
    </div>
    <div class="foot_bottom">
      <p>友情链接： <a href='http://http://test.nniubi.com/' target='_blank'>NNB竞技活动网</a> </p>
      <p>Copyright &copy; 2016-2017 . 南京创劲 版权所有 苏ICP12345678 </p>
    </div>
  </div>
  <div class="eject">
    <div class="theme-mask"></div>
    <div class="popover1">
      <dl>
        
      </dl>
    </div>
  </div>
  <script type="text/javascript">
$(document).ready(function($){
$('.weixin2').click(function(){
$('.theme-mask').show();
$('.theme-mask').height($(document).height());
$('.popover1').slideDown(200);
})
$('.close').click(function(){
$('.theme-mask').hide();
$('.popover1').slideUp(200);

})

})
</script> 
</div>
<script>
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 5);
//--></script>
</body>
</html>